<template>
  <el-date-picker
    v-model="time"
    type="datetimerange"
    align="right"
    unlink-panels
    :range-separator="$t('common.base.to')"
    :start-placeholder="$t('common.base.startDate')"
    :end-placeholder="$t('common.base.endDate')"
    :picker-options="pickerOptions"
    :clearable="false"
    value-format="timestamp"
    :default-time="['00:00:00', '23:59:59']"
    @change="changeDate">
  </el-date-picker>

</template>
<script>
import { t } from '@src/locales'
import { dayTimeEnd, nearDateBy, useDatePicker, getTimestamp } from 'pub-bbx-utils';
export default {
  name: 'date-picker',
  props: {
    type: {
      type: String,
    }
  },
  data() {
    const { today, yesterday, nearDate } = useDatePicker()

    return {
      time: [+nearDateBy(7, 'day'), +dayTimeEnd()],
      pickerOptions: {
        shortcuts: [
          today(t('common.base.today')),
          yesterday(t('common.base.aboutTime.yesterday')),
          nearDate(t('common.base.aboutTime.nearlyWeek'), 1, 'week'),
          nearDate(t('common.base.aboutTime.nearlyMonth'), 1, 'month'),
          nearDate(t('common.base.aboutTime.lastThreeMonths'), 3, 'month'),
        ]
      },
    }
  },
  mounted() {
    if (this.type === 'staffEfficiency') {
      if (localStorage.getItem('staffEfficiency')) {
        this.time = JSON.parse(localStorage.getItem('staffEfficiency'))?.map(item => getTimestamp(item))
      }
    }
    
    this.changeDate(this.time)
    
  },
  methods: {
    changeDate(v) {
      this.$emit('datePicker', v)
    }
  }
}
</script>
<style lang="scss">
  .el-picker-panel__footer {
    button{
      &:first-child {
        display: none;
      }
    }
  }
</style>